<script setup>
import * as echarts from "echarts";
import { ref, onMounted, toRefs, defineProps } from "vue";

const props = defineProps({
  reportData: {
    type: Object,
    default: () => ({}),
  },
  // month: {
  //   type: String,
  //   default: 'xx',
  // }
});
const { reportData } = toRefs(props);
const echartsList = ref([
  {
    label: '参与评分专家人数',
    value: 'section',
    data: [],
  },
  {
    label: '黄色问题线索',
    value: 'yellowEarlyWarning',
    data: [],
  },
  {
    label: '红色问题线索',
    value: 'redEarlyWarning',
    data: [],
  },
]);
onMounted(() => {
  initEcharts();
});

const option = ref({
  grid: {
    top: '10px',
    left: '70px',
    right: 0,
    bottom: 0,
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
      crossStyle: {
        color: '#999'
      }
    }
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      axisPointer: {
        type: 'shadow'
      },
      axisTick: false,
      axisLine: {
        lineStyle: {
          type: 'solid',
          color: '#BFD8FC'
        }
      },
      axisLabel: {
        interval: 0,
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      show: true,
      name: '',
      // interval: 10,
      axisLabel: {
        show: true,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
        }
      },
    },
    {
      type: 'value',
      show: false,
      name: '',
      minInterval: 1,
      interval: 1,
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
        }
      },
    }
  ],
  series: [
    {
      name: '参与评分专家人数',
      type: 'bar',
      tooltip: {},
      // smooth: 20,
      barWidth: 20,
      itemStyle: {
        // barBorderRadius: 2,
      },
      color: '#5678ff7f',
      data: [],
      // stack: 'stack1'
    },
    {
      name: '黄色问题线索',
      type: 'line',
      tooltip: {},
      symbol: 'none',
      color: '#F99C34',
      data: [],
    },
    {
      name: '红色问题线索',
      type: 'line',
      symbol: 'none',
      tooltip: {},
      color: '#DA0000',
      data: []
    }
  ]
})
var echartsDom = ref();
const initEcharts = () => {
  var myChart = echarts.init(echartsDom.value, 'default');
  if (reportData.value?.month) {
    option.value.xAxis[0].data = reportData.value.month;
    echartsList.value.forEach(item => {
      item.data = reportData.value[item.value];
      option.value.series.forEach(ele => {
        if (ele.name === item.label) {
          ele.data = reportData.value[item.value];
        }
      })
    })
  }
  window.addEventListener('resize', function () {
    myChart.resize();
  })
  option.value && myChart.setOption(option.value);
};
</script>

<template>
  <div class="main-card grid-main-card">
    <div class="card-title">
      <card-title title="月度-专家评分问题线索"></card-title>
    </div>
    <div class="main-content">
      <div ref="echartsDom" style="width: 100%; height: 200px"></div>
    </div>
    <div>
      <div v-for="item in echartsList" :key="item.value" class="target-item">
        <span class="label">{{ item.label }}</span>
        <span class="num" v-for="ele in item.data" :key="ele">
          <span class="num-item">{{ ele }}</span>
        </span>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.main-card {
  width: 100%;
  height: 100%;
}
.main-content {
  display: flex;
}

.target-item {
  display: flex;
  margin-top: 7px;
  padding: 2px 0 2px 8px;
  border-radius: 52px;
  background: #F99C341A;
  font-size: 12px;
  .label {
    width: 100px;
    font-weight: 500;
    line-height: 18px;
    color: #F99C34;
  }

  .num {
    flex: 1;
  }

  span {
    display: inline-block;
    text-align: center;
    color: #1B2A52;
    line-height: 18px;
  }

  &:first-child {
    background: #0033FF1A;
    .label {
      color:#5678FF;
    }
  }

  &:last-child {
    background:#DA00001A;
    .label {
      color: #DA0000;
    }

  }
}
</style>
